<template>
  <view class="details-content">
    <view class="transition-bg">
      <view>
        <view class="u-line-3 project-name">
          {{ projectInfo.projectName }}
        </view>
        <view class="tag-box">
          <view>
            <text class="tag-item">
              {{ projectInfo.projectType
              }}{{
                projectInfo.drugRegister ? '-' + projectInfo.drugRegister : ''
              }}
            </text>
            <text class="tag-item m-x-10" v-if="projectInfo.stages">{{
              projectInfo.stages
            }}</text>
            <text class="tag-item">{{ projectInfo.projectNo }}</text>
          </view>
        </view>
      </view>
    </view>
    <u-card>
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">项目信息</text>
      </template>
      <view class="" slot="body">
        <describeVue :data="projectInfo" :column="column" :empty-value="'无'">
          <template #projectStatus="{ prop, data }">
            {{ PROJECT_STATUS_MAP[data[prop]]?.label || '无' }}
          </template>
          <template
            v-if="getDrugRegisterTypeName(projectInfo.projectTypeValue)"
            #projectTypeValue="{ data }"
          >
            {{ getDrugRegisterTypeName(data.projectTypeValue) }}:
          </template>
          <template
            v-if="getDrugRegisterTypeName(projectInfo.projectTypeValue)"
            #drugRegister="{ prop, data }"
          >
            {{ data[prop] || '无' }}
          </template>
        </describeVue>
      </view>
    </u-card>
    <u-card>
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">本中心信息</text>
        <u-tag
          v-if="leaderOrg && leaderOrg.orgId === asyncUser.orgId"
          class="u-m-l-10"
          text="组长单位"
          type="success"
        ></u-tag>
      </template>
      <view class="" slot="body">
        <describeVue
          v-if="projectInfo.currentOrgInfo"
          :data="projectInfo.currentOrgInfo"
          :column="currentOrgInfoColumn"
          :empty-value="'无'"
        >
        </describeVue>
        <describeVue
          v-for="(item, index) in projectInfo.projectProfessionList"
          :key="item.projectBasicId"
          :data="item"
          :column="projectProfessionColumn"
          :empty-value="'无'"
        >
          <template #departmentNameLabel="{ data }">
            {{
              '本中心承担的专业' +
              (projectInfo.projectProfessionList.length > 1 ? index + 1 : '')
            }}：
          </template>
        </describeVue>
      </view>
    </u-card>
    <u-card v-if="leaderOrg && leaderOrg.orgId !== asyncUser.orgId">
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">组长单位</text>
      </template>
      <view class="" slot="body">
        <describeVue
          :data="leaderOrg"
          :column="leaderOrgColumn"
          :empty-value="'无'"
        >
          <template #piName="{ prop }">
            {{ projectInfo.leaderProfessioInfo?.piName || '无' }}
          </template>
          <template #piTitle="{ prop }">
            {{ projectInfo.leaderProfessioInfo?.piTitle || '无' }}
          </template>
        </describeVue>
      </view>
    </u-card>
    <u-card>
      <template #head>
        <u-icon
          size="28"
          custom-prefix="custom-icon"
          color="#0177fd"
          name="wenjian"
        ></u-icon>
        <text class="u-m-l-10 font-bold u-font-lg">参与组织信息</text>
      </template>
      <view class="" slot="body">
        <describeVue
          v-for="(item, index) in projectInfo.sponsorOrgs"
          :data="item"
          :column="sbfColumn"
          :empty-value="'无'"
        >
          <template #orgNameLabel="{ data }">
            {{ '申办方' + (index + 1) }}：
          </template>
        </describeVue>
        <describeVue
          v-for="(item, index) in projectInfo.croOrgInfo"
          :data="item"
          :column="sbfColumn"
          :empty-value="'无'"
        >
          <template #orgNameLabel="{ data }">
            {{ 'CRO' + (index + 1) }}：
          </template>
        </describeVue>
        <describeVue
          v-for="(item, index) in projectInfo.smoOrgInfo"
          :data="item"
          :column="sbfColumn"
          :empty-value="'无'"
        >
          <template #orgNameLabel="{ data }">
            {{ 'SMO' + (index + 1) }}：
          </template>
        </describeVue>
      </view>
    </u-card>
  </view>
</template>
<script lang="ts" setup>
import describeVue from '@/components/describe.vue';
import { onLoad } from '@dcloudio/uni-app';
import { PROJECT_STATUS_MAP, orgTypeEnum, source } from '@/pages/project/index';
import { getProjectDetails } from '@/api/modules/project';
import { useUserStoreWidthOut } from '@/stores/user';

const column = [
  {
    label: '项目状态',
    prop: 'projectStatus',
    width: 200,
  },
  {
    label: '试验类型',
    prop: 'projectType',
    width: 200,
  },
  {
    prop: 'drugRegister',
    customLabel: 'projectTypeValue',
    width: 200,
  },
  {
    label: '试验分期',
    prop: 'stages',
    width: 200,
  },
  {
    label: '试验方案编号',
    prop: 'projectPlanNo',
    width: 200,
  },
  {
    label: '项目编号',
    prop: 'projectNo',
    width: 200,
  },
  {
    label: '治疗领域',
    prop: 'treatmentArea',
    width: 200,
  },
  {
    label: '项目范围',
    prop: 'projectRange',
    width: 200,
  },
  {
    label: '产品名称',
    prop: 'productName',
    width: 200,
  },
  {
    label: 'NMPA受理号/备案号',
    prop: 'approvalNo',
    width: 220,
  },
  {
    label: 'NMPA受理日期/备案日期',
    prop: 'approvalTime',
    width: 200,
  },
  // {
  //   label: '备案号',
  //   prop: 'recordNo',
  //   width: 200,
  // },
  // {
  //   label: '备案日期',
  //   prop: 'recordTime',
  //   width: 200,
  // },
  {
    label: '预计开始时间',
    prop: 'projectEstimateStartTime',
    width: 200,
  },
  {
    label: '预计结束时间',
    prop: 'projectEstimateEndTime',
    width: 200,
  },
  {
    label: '试验总设计例数',
    prop: 'designNumber',
    width: 220,
  },
  {
    label: '盲法类型',
    prop: 'blindType',
    width: 200,
  },
];
const currentOrgInfoColumn = [
  {
    label: '本中心预计开始日期',
    prop: 'coreEstimateStartTime',
    width: 260,
  },
  {
    label: '本中心预计结束日期',
    prop: 'coreEstimateEndTime',
    width: 260,
  },
  {
    label: '本中心拟承担例数',
    prop: 'assumeNumber',
    width: 260,
  },
];
const projectProfessionColumn = [
  {
    prop: 'departmentName',
    customLabel: 'departmentNameLabel',
    width: 260,
  },
  {
    label: '本中心主要研究者',
    prop: 'piName',
    width: 260,
  },
  {
    label: '本中心研究者职称',
    prop: 'piTitle',
    width: 260,
  },
];
const sbfColumn = [
  {
    prop: 'orgName',
    customLabel: 'orgNameLabel',
    width: 200,
  },
  {
    label: '联系人',
    prop: 'orgContact',
    width: 200,
  },
  {
    label: '联系方式',
    prop: 'orgContactPhone',
    width: 200,
  },
];
const leaderOrgColumn = [
  {
    label: '组长单位',
    prop: 'orgName',
    width: 260,
  },
  {
    label: '组长单位主要研究者',
    prop: 'piName',
    width: 260,
  },
  {
    label: '组长单位主要研究者职称',
    prop: 'piTitle',
    width: 320,
  },
];

// 组长单位
const leaderOrg = computed(() => {
  const projectOrgList = projectInfo.value.projectOrgList;
  if (!projectOrgList) return null;
  else {
    const org = projectOrgList.find((item: any) => item.isGroupLeaderOrg);
    if (!org) return null;
    else return org;
  }
});

const useUser = useUserStoreWidthOut();
const asyncUser = useUser.getOrgInfo;
const initProjectFrom = (data: any) => {
  const form = Object.assign(source(asyncUser), data);
  // 找到申办方数据
  form.sponsorOrgs = data.projectOrgList.filter(
    (item: any) => item.orgType === orgTypeEnum.SPONSOR
  );
  // 找到CRO数据
  form.croOrgInfo = data.projectOrgList.filter(
    (item: any) => item.orgType === orgTypeEnum.CRO
  );
  // 找到SMO数据
  form.smoOrgInfo = data.projectOrgList.filter(
    (item: any) => item.orgType === orgTypeEnum.SMO
  );
  // 找到本组织
  form.currentOrgInfo = data.projectOrgList.find(
    (item: any) => item.orgId === asyncUser.orgId
  );
  // 找到组长单位
  const leaderOrgInfo = data.projectOrgList.find(
    (item: any) => item.isGroupLeaderOrg === 1
  );

  if (leaderOrgInfo && leaderOrgInfo.orgId === asyncUser.orgId) {
    form.isLeader = true;
  }

  if (leaderOrgInfo) {
    form.leaderOrgInfo = leaderOrgInfo;
  }

  // 处理专业，编辑的时候不可以编辑之前的数据，只能删除和新增
  form.projectProfessionList = data.projectProfessionList
    .filter((el: any) => el.piId !== undefined)
    .map((item: any) => {
      item.isInit = true;
      return item;
    });
  // 处理组长单的专业
  const leaderProfess = data.projectProfessionList.find(
    (item: any) => item.piId == undefined
  );

  if (leaderProfess) {
    form.leaderProfessioInfo.piName = leaderProfess.piName;
    form.leaderProfessioInfo.piTitle = leaderProfess.piTitle;
  }

  return form;
};
const projectInfo = ref<any>({});
const getProjectInfo = (projectId: string) => {
  const params = {
    projectId,
  };
  getProjectDetails(params).then((res) => {
    projectInfo.value = initProjectFrom(res);
  });
};
const ProjectClassification: any = {
  '1': '注册分类',
  '2': '注册分类',
  '3': '医疗技术分类',
  '4': '研究分类',
  '6': '注册分类',
};

const getDrugRegisterTypeName = (type: string) => {
  console.log('type: ' + type);
  if (type) {
    return ProjectClassification[type];
  }
  return '注册分类';
};

onLoad(() => {
  const { projectId } = (uni as any).$Router.getQuery();
  getProjectInfo(projectId);
});
</script>
<style>
page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.details-content {
  width: 100%;
  height: calc(100% - env(safe-area-inset-bottom));
  overflow-y: auto;
}
.transition-bg {
  width: 90%;
  border-radius: 30rpx;
  padding: 20rpx;
  margin: 0 auto;
  margin-top: 20rpx;
  background: linear-gradient(to top, #d6e9ff, #fff);

  .project-name {
    font-size: 32rpx;
    height: auto;
    font-weight: bold;
  }
  .tag-box {
    display: flex;
    justify-content: space-between;
    margin-top: 10rpx;
    align-items: center;

    .tag-item {
      background: rgba(255, 255, 255, 0.5);
      padding: 5rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #0177fd;
    }
    .m-x-10 {
      margin: 0 10rpx;
    }
  }
}
</style>
